<template>
	<!-- 首页 -->
	<view class="pb50">
		<view class="topPlace"></view>
		<!-- 搜索栏 -->
		<view class="search-box">
			<view class="my-search-container mb76">
				<!-- 使用 view 组件模拟 input 输入框的样式 -->
				<u-search placeholder="广大职位" v-model="name" @search="incollarList()" @blur="incollarList()"
					:showAction="false"></u-search>
			</view>
		</view>
		<!-- /搜索栏 -->

		<!-- 宫格导航栏 -->
		<view class="pl54 pr54">
			<u-grid :col="5" :border="false">
				<u-grid-item class="mb44" bgColor="rgba(0,0,0,.0)"
					@tap="$jump('/pages/home/recruit/recruit?type=1&tit=猎聘')">
					<image src="/static/img/index/index-1.png" class="w94 h94"></image>
					<view class="grid-text">猎聘</view>
				</u-grid-item>
				<u-grid-item class="mb44" bgColor="rgba(0,0,0,.0)" @tap="$jump('/pages/home/BlueCollar/BlueCollar?from=blue')">
					<image src="/static/img/index/1index-2.png" class="w94 h94"></image>
					<view class="grid-text">蓝领</view>
				</u-grid-item>
				<u-grid-item class="mb44" bgColor="rgba(0,0,0,.0)"
					@tap="$jump('/pages/home/recruit/recruit?type=3&tit=实习')">
					<image src="/static/img/index/1index-3.png" class="w94 h94"></image>
					<view class="grid-text">实习</view>
				</u-grid-item>
				<u-grid-item class="mb44" bgColor="rgba(0,0,0,.0)" @tap="$jump('/pages/home/Recruitment/Recruitment')">
					<image src="/static/img/index/1index-4.png" class="w94 h94"></image>
					<view class="grid-text">招考</view>
				</u-grid-item>
				<u-grid-item class="mb44" bgColor="rgba(0,0,0,.0)" @tap="$jump('/pages/home/WorkPlace/WorkPlace')">
					<image src="/static/img/index/1index-5.png" class="w94 h94"></image>
					<view class="grid-text">职场</view>
				</u-grid-item>
				<u-grid-item class="mb44" bgColor="rgba(0,0,0,.0)" @tap="$jump('/pages/my/VIP/VIP')">
					<image src="/static/img/index/1index-6.png" class="w94 h94"></image>
					<view class="grid-text">会员</view>
				</u-grid-item>
				<u-grid-item class="mb44" bgColor="rgba(0,0,0,.0)" @tap='$jump("/pages/home/invitation/invitation")'>
					<image src="/static/img/index/1index-7.png" class="w94 h94"></image>
					<view class="grid-text">邀请</view>
				</u-grid-item>
				<u-grid-item class="mb44" bgColor="rgba(0,0,0,.0)" @tap="$jump('/pages/home/subsidy/subsidy')">
					<image src="/static/img/index/1index-8.png" class="w94 h94"></image>
					<view class="grid-text">结算</view>
				</u-grid-item>
				<u-grid-item class="mb44" bgColor="rgba(0,0,0,.0)" @click="gotoluckDraw" v-if="is_open==1">
					<image src="/static/img/index/1index-9.png" class="w94 h94"></image>
					<view class="grid-text">抽奖</view>
				</u-grid-item>
				<u-grid-item class="mb44" bgColor="rgba(0,0,0,.0)"
					@tap="$jump('/pages/home/attractInvestment/attractInvestment')">
					<image src="/static/img/index/1index-10.png" class="w94 h94"></image>
					<view class="grid-text">招商</view>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- /宫格导航栏 -->

		<!-- 轮播图 -->
		<view class="wrap pl20 pr20">
			<u-swiper :list="banner" mode='rect'></u-swiper>
		</view>
		<!-- /轮播图 -->

		<!-- 职位列表大盒子 -->
		<view class="pl20 pr20 pt40">
			<!-- 标题 -->
			<view class="flex row-between col-center">
				<!-- 标题左侧 -->
				<view class="" v-if="menu.length" @tap="menuShow=true">
					<text>{{menu[menuIndex].name}}</text>
					<u-icon name="arrow-right" size="26" color="#6D788B"></u-icon>
				</view>
				<view class="" v-else></view>
				<!-- /标题左侧 -->
				<!-- 标题右侧tab栏 -->
				<view class="" style="width: 200rpx;">
					<u-tabs :list="tablist" :is-scroll="false" :current="newest" @change="tabs"></u-tabs>
				</view>
				<!-- /标题右侧tab栏 -->
			</view>
			<!-- /标题 -->

			<!-- 职位列表组件 -->
			<u-empty text="暂无职位" marginTop="100" v-if="!list.length"></u-empty>
			<view class="" v-for="(item,index) in list" :key="index">
				<blueJobList :data="item" />
			</view>
			<!-- /职位列表组件 -->
		</view>
		<!-- /职位列表大盒子 -->
		<u-select v-model="menuShow" label-name='name' @confirm="confirm" :list="menu"></u-select>
	</view>
</template>

<script>
	import blueJobList from '@/components/blueJobList.vue'
	export default {
		components: {
			blueJobList
		},
		data() {
			return {
				// 轮播图列表
				banner: [],
				tablist: [{
					name: '推荐'
				}, {
					name: '最新'
				}],
				newest: 0, //是否是最新 不传为否  1为是
				name: '', //搜索
				page: 1, //页码
				category_id: '', //类别id
				menu: [], //蓝领分类
				menuIndex: 0,
				menuShow: false,
				list: [], //首页职位信息
				is_open:uni.getStorageSync('config').is_open
			};
		},
		onLoad() {
			this.rotation()
			this.$user() //当前会员信息
			this.$config() //config配置信息
			// this.indexCategory() //蓝领分类
		},
		onShow() {
			this.indexCategory() //蓝领分类
		},
		methods: {
			rotation() {
				this.$api.rotation().then(res => {
					res.data.forEach(item => {
						item.image = this.$baseUrl + item.image
					})
					this.banner = res.data
				})
			},
			tabs(index) {
				this.newest = index
				this.incollarList() //首页职位信息
			},
			indexCategory() { //蓝领分类
				this.$api.indexCategory().then(res => {
					res.data.forEach((item, index) => {
						item.value = index
					})
					this.menu = res.data
					this.incollarList() //首页职位信息
				})
			},
			incollarList() { //首页职位信息
				let data = {
					category_id: this.menu[this.menuIndex].id,
					page: 1,
					size: this.page * 10,
					name: this.name,
					newest: this.newest
				}
				this.$api.incollarList(data).then(res => {
					this.list = res.data
				})
			},
			confirm(e) {
				this.menuIndex = e[0].value * 1
				this.incollarList() //首页职位信息
			},
			//跳转转盘
			gotoluckDraw() {
				if(this.is_open==1) {
					this.$jump('/pages/home/luckDraw/luckDraw')
				}else {
					this.$msg('该功能未开放')
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF url('/static/img/index/index_bg.png') no-repeat;
		background-size: 100% auto;
		background-color: #FFFFFF;
	}

	.search-box {
		// 设置定位效果为“吸顶”
		position: sticky;
		// 吸顶的“位置”
		top: 0;
		// 提高层级，防止被轮播图覆盖
		z-index: 999;
	}

	.my-search-container {
		height: 100rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
	}

	.my-search-box {

		height: 72rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #1385FF;

		.placeholder {
			font-size: 26rpx;
			margin-left: 10rpx;
			color: #B9C4D6;
		}
	}

	.jobitem {
		background: #FFFFFF;
		box-shadow: 0px 6rpx 20rpx 0px #E8EAEF;
		border-radius: 14rpx;

		.jobtit {
			font-size: 30rpx;
			color: #0C162E;
		}

		.jobitem-middle {
			text-align: center;
			line-height: 40rpx;
			background: #F1F3F5;
			border-radius: 6rpx;
			font-size: 22rpx;
			color: #6D788B;
		}

		.salary {
			font-size: 34rpx;
			color: #FF286A;
		}

		.peopNum {
			font-size: 22rpx;
			color: #6D788B;
		}

		.jobitem-btn {
			text-align: center;
			line-height: 54rpx;
			background: #1385FF;
			border-radius: 10rpx;
			color: #FFFFFF;
		}
	}
</style>
